<template>
  <div class="login">
    <div class="login-logo">
      <div class="img-wrap"><img src="/dist/static/img/logo.png" alt=""></div>
    </div>
    <form action="">
    <ul class="login-info">
      <li><label>学校:</label><input type="text" readonly="readonly" v-model="Dschool"></li>
      <input type="hidden" name="school_id" v-model="schoolId">
      <li class="arrow"><label>校区:</label><input type="text" readonly="readonly" v-model="Dcampus" @click="schoolS" :id="campusId">
          <div class="campus" v-show="isCampus">
            <ul>
              <li v-for="item in campus" @click="selectCampus(item)" :id="item.id">{{item.text}}</li>
            </ul>
          </div>
          <input type="hidden" name="campus_id" v-model="campusId">
      </li>
      
      <li class="arrow"><label>宿舍:</label><input type="text" readonly="readonly" v-model="Ddorm" @click="dormS">
          <div class="room" v-show="isDorm" :id="dormId">
            <ul>
              <li v-for="item in dorm" @click="selectDorm(item)" :id="item.id">{{item.text}}</li>
            </ul>
          </div>
          <input type="hidden" name="dorm_id" v-model="dormId">
      </li>

      <li><label>寝室:</label><input type="text" v-model="Droom" name="room_number"></li>
      <li><label>手机:</label><input type="text" v-model="Dphone" name="phone"></li>
    </ul>

    <input type="hidden" name='name' v-model="name">
    <input type="hidden" name='gender' v-model="gender">
    <input type="hidden" name='city' v-model="city">
    <input type="hidden" name='province' v-model="province">
    <input type="hidden" name='email' v-model="email">
    <input type="hidden" name='avatar' v-model="avatar">
    <input type="hidden" name='wechat_openid' v-model="wechat_openid">

    <toast v-model="show6" type="text" width="8em" :time="1000">{{msg}}</toast>

    <button type="button" @click="register">完成</button>

    </form>

  </div>
</template>

<script>
import { Toast } from 'vux'

export default {
  name: 'login',
  components:{
    Toast
  },
  data () {
    return {
      Dschool:'',
      Dcampus:'',
      Ddorm:'',
      Droom:'',
      Dphone:'',
      schoolId:5,
      campusId:3,
      dormId:2,
      name:null,
      gender:null,
      city:null,
      province:null,
      email:null,
      avatar:null,
      wechat_openid:null,
      isCampus:false,
      isDorm:false,
      show6:false,
      msg:'',
      school:null,
      campus:null,
      dorm:null,
    }
  },
  methods:{
    schoolS(){
      this.isCampus=!this.isCampus
      this.isDorm = false
    },
    dormS() {
      this.isDorm=!this.isDorm  
      this.isCampus=false
    },
    selectCampus(item) {
      this.isCampus =false
      this.Dcampus = item.text
      this.campusId= item.id
      localStorage.setItem("campusId",JSON.stringify(item.id));
      this.$http.get('/api/campuses/'+this.campusId+'/dorms').then((res) => {//获取宿舍列表
          this.dorm = res.body;
      });
    },
    selectDorm(item) {
      this.isDorm =false
      this.Ddorm = item.text
      this.dormId= item.id
    },
    register() {
      if(this.Dcampus == ''){
        this.show6 = true;
        this.msg = '必须选择校区';
        return
      }else if(this.Ddorm == ''){
        this.show6 = true;
        this.msg = '必须选择宿舍';
        return
      }else if(this.Droom == ''){
        this.show6 = true;
        this.msg = '请输入寝室';
        return
      }else if(!(/^1[34578]\d{9}$/.test(this.Dphone))){
        this.show6 = true;
        this.msg = '手机号码有误'; 
        return
      }else{
        var _this = this;
        const formData = {
            'name':this.name,
            'gender':this.gender,
            'city':this.city,
            'province':this.province,
            'email':this.email,
            'avatar':this.avatar,
            'wechat_openid':this.wechat_openid,
            'phone':this.Dphone,
            'school_id':this.schoolId,
            'campus_id':this.campusId,
            'dorm_id':this.dormId,
            'room_number':this.Droom
        }
        this.$http.post('/api/wx/register',formData).then((response) => {
            response = response.body;
            this.show6 = true;
            this.msg = '注册成功';
            setTimeout(function(){
              _this.$router.push({path:'/dist/Home'});
            },1000)
        }).catch(function(){
            this.show6 = true;
            this.msg = '注册失败';
        });
      }
    }
  },
  created(){
    let info = JSON.parse(localStorage.getItem('userInfo'));
    this.name = info.nickname;
    this.country = info.country;
    this.city = info.city;
    this.province = info.province;
    this.gender = info.sex;
    this.avatar = info.headimgurl;
    this.gender = info.gender;
    this.email = info.email;
    this.wechat_openid = info.openid;
  },
  mounted() {
    let codeSchoolId = this.$route.query.schoolId; 
    this.$http.get('/api/schools').then((res) => {//获取学校列表
        for(var i=0;i<res.body.length;i++){
          if(res.body[i].id==codeSchoolId){
            this.Dschool = res.body[i].text//选定扫码学校
            this.$http.get('/api/schools/'+codeSchoolId+'/campuses').then((res) => {//获取校区列表
                this.campus = res.body;
            });
          }
        }
    }).catch(function(){
        console.log('');
    });
  }
}
</script>

<style scoped>
  .login-logo{
    height: 12rem;
  }
  .login button{
    width: 90%;
    height: 4rem;
    background-color: #ff4d4d;
    color: #fff;
    margin-left: 5%;
    font-size: 20px;
    border-radius: 8px;
    border:none;
    outline: none;
    margin-top:8px;
  }
  .img-wrap{
    margin-left: 50%;
    margin-top: 7rem;
    transform: translateX(-50%);
    height: 5rem;
    width: 22.2rem;
  }
  .img-wrap img{
    width: 100%;
    height: auto;
  }
  .campus,.room{
    position: absolute;
    width: 100%;
    top: 4.5rem;
    left: 0px;
    z-index: 100;
  }
  .campus li,.room li{
    margin-bottom: 0px!important;
    font-size: 16px!important;
  }
  .login-info li{
    background-color: #fff;
    line-height: 4.5rem;
    font-size: 18px;
    padding: 0 2rem;
    height: 4.5rem;
    margin-bottom: 0.8rem;
    position: relative;
    box-shadow: 0px 0px 1px 0px #c8c8c8;
  }
  .login-info .arrow:after{
    content: "";
    position: absolute;
    border:1px solid #3f3f3f;
    border-width: 1px 1px 0 0;
    height: 10px;
    width: 10px;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
  }
  .login-info li input{
    height: 26px;
    width: 70%;
    font-size: 16px;
    text-indent: 1rem;
    border: none;
    outline: none;
  }
  .weui-toast__content{
    font-size: 16px!important;
  }
</style>
